<template>
  <div class="page-order-list">
    <div class="search-container">
      <input v-model="frQueryParam" @confirm="reset" placeholder-class="placeholder" confirm-type="search" placeholder="手机号/姓名/订单号">
      <div class="btn-search" @click="reset">搜索</div>
    </div>
    <scroll-view class="data-container" scroll-y @scrolltolower="loadData">
      <div class="order-wrap" @click="toDetail(data)" v-for="(data,index) in dataList" :key="index">
        <div class="order-no">
          订单号:{{data.orderNo}}
          <div class="order-status">{{data.orderStatus}}</div>
        </div>
        <div class="goods-name">{{data.serviceGoodsName}}</div>
        <ul class="info-list">
          <li class="info">
            <div class="title">用户姓名:</div>
            <div class="value">{{data.realName}}</div>
          </li>
          <li class="info">
            <div class="title">用户电话:</div>
            <div class="value">{{data.userMobile}}</div>
          </li>
          <li class="info">
            <div class="title">录单人员:</div>
            <div class="value">{{data.saleUserName}}</div>
          </li>
          <li class="info">
            <div class="title">是否延迟发货:</div>
            <div class="value">{{data.isDelayShipping === 1 ? "是" : "否"}}</div>
          </li>
        </ul>
        <ul class="order-footer">
          <li class="btn btn-danger" @click.stop="toCheckResult(data,false)">不通过</li>
          <li class="btn btn-active"  @click.stop="toCheckResult(data, true)">通过</li>
        </ul>
      </div>
    </scroll-view>
    <div class="result-wrap" v-if="showFailDialog">
      <div class="result-body">
        <div class="result-title">审核不通过</div>
        <textarea v-model="failRemark" placeholder="请填写原因"/>
        <div class="btn-list">
          <div class="btn" @click="showFailDialog = false;">取消</div>
          <div class="btn btn-active" @click="toRefund">确定</div>
        </div>
      </div>
    </div>
    <div class="result-wrap" v-if="showPassDialog">
      <div class="result-body">
        <div class="result-title">{{passTip}}</div>
        <textarea v-model="passRemark" placeholder="请填写备注"/>
        <div class="btn-list">
          <div class="btn" @click="showPassDialog = false;">取消</div>
          <div class="btn btn-active" @click="toPass">确定</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import orderStatus from "utils/order-status";

  export default {
    data() {
      return {
        page: 1,
        pageSize: 100,
        dataList: [],
        loading: false,
        frQueryParam: "",
        showPassDialog: false,
        showFailDialog: false,
        failRemark: '',
        passRemark: '',
        passTip: '',
        passStatus: '',
      };
    },
    components: {},
    methods: {
      async toPass(){
        wx.showLoading();
        const result = await wx.request({
          method: 'POST',
          url: '/bg/order/payStatus/update',
          data: {
            orderId: this.orderInfo.orderId,
            remark: this.passRemark || '',
            status: this.passStatus
          }
        });
        wx.hideLoading();
        if (result.code === 200) {
          wx.showModal({
            content: '操作成功',
            showCancel: false,
            success: result => {
              if(result.confirm){
                this.showPassDialog = false;
                this.reset();
              }
            }
          });
        }else{
          wx.showToast(result.message)
        }
      },
      async toRefund(){
        wx.showLoading();
        const result = await wx.request({
          method: 'POST',
          url: '/bg/order/status/cancel',
          data: {
            orderId: this.orderInfo.orderId,
            remark: this.failRemark || '',
            refundFlag: 0
          }
        });
        wx.hideLoading();
        if (result.code === 200) {
          this.showFailDialog = false;
          wx.showModal({
            content: '操作成功',
            showCancel: false,
            success: result => {
              if(result.confirm){
                this.showFailDialog = false;
                this.reset();
              }
            }
          });
        }else{
          wx.showToast(result.message)
        }
      },
      toCheckResult(data, flag){
        this.orderInfo = data;
        console.info(data)
        if(flag){
          if(this.orderInfo.waitPayAmount === 0 && this.orderInfo.payStatus === 1){
            this.passTip = '确定已收全款';
            this.passStatus = 3;
          }
          if(this.orderInfo.waitPayAmount > 0 && this.orderInfo.payStatus === 1){
            this.passTip = `确定已收定金${this.orderInfo.partOrderAmount}元?`;
            this.passStatus = 2;
          }
          this.showPassDialog = true;
        }else{
          this.showFailDialog = true;
        }
      },
      toDetail(data) {
        wx.navigateTo({
          url: "/pages/order-detail/main?id=" + data.orderId
        });
      },
      async reset() {
        this.page = 1;
        this.loading = false;
        this.dataList = [];
        await this.loadData();
      },
      async loadData() {
        if (this.loading) {
          return false;
        }
        this.loading = true;
        wx.showLoading();
        const params = {
          page: this.page++,
          pageSize: this.pageSize,
          payStatus: 1,
          orderType: 0,
        };
        if (this.frQueryParam) {
          params.frQueryParam = this.frQueryParam;
        }
        wx.showLoading();
        const result = await wx.request({
          url: "/bg/order/listPage",
          data: params
        });
        wx.hideLoading();
        if (result.code === 200) {
          const list = [];
          result.data.rows.forEach(data => {
            if ((data.orderStatus > 1 && data.orderStatus < 8)
              || (data.orderStatus === 11 && data.isDelayShipping === 1)) {
              const finalData = _.pick(data, ['orderId', 'orderNo', 'waitPayAmount', 'partOrderAmount', 'payStatus', 'serviceGoodsName', 'realName', 'userMobile', 'saleUserName', 'orderStatus']);
              finalData.orderStatus = orderStatus(finalData.orderStatus);
              list.push(finalData);
            }
          });
          this.dataList = this.dataList.concat(list);
          this.loading = result.data.totalPage === result.data.page;
        } else {
          wx.showToast(result.message);
        }
      }
    },
    async onShareAppMessage() {
      await this.loadData();
      wx.stopPullDownRefresh();
    },
    async mounted() {
      this.loadData();
    }
  };
</script>

<style lang="scss">
  @import "../../styles/base";

  .page-order-list {
  }

  .search-container {
    @include middle-center-x();
    top: 0;
    display: flex;
    align-items: center;
    width: pxToRem(750);
    height: pxToRem(120);
    padding: pxToRem(26) pxToRem(40);
    background-color: #F5F5F5;
    z-index: 1000;
    input {
      padding-left: pxToRem(40);
      padding-right: pxToRem(40);
      margin-right: pxToRem(40);
      width: pxToRem(528);
      height: pxToRem(68);
      line-height: pxToRem(68);
      font-size: pxToRem(24);
      color: $main-color;
      background-color: #fff;
      border-radius: pxToRem(44);
    }
    .placeholder {
      color: #A7E2FD;
    }
    .btn-search {
      height: pxToRem(52);
      line-height: pxToRem(52);
      width: pxToRem(96);
      text-align: right;
      border-left: pxToRem(2) solid #E0E0E0;
      font-size: pxToRem(28);
      color: #44BDF5;
    }
  }

  .data-container {
    height: 100vh;
    width: pxToRem(750);
    padding-top: pxToRem(120);
    box-sizing: border-box;
    background-color: #F5F5F5;
    .order-wrap {
      margin-bottom: pxToRem(20);
      background-color: #fff;
      padding-left: pxToRem(30);
      padding-right: pxToRem(30);
      .order-no {
        position: relative;
        padding-top: pxToRem(30);
        padding-bottom: pxToRem(20);
        border-bottom: pxToRem(1) solid rgba(68, 189, 245, 0.3);
        font-size: pxToRem(26);
        color: #707070;
        background-color: #fff;
        .order-status {
          position: absolute;
          right: 0;
          top: pxToRem(30);
          color: #FF6550;
        }
      }
      .goods-name {
        padding-top: pxToRem(30);
        padding-bottom: pxToRem(30);
        font-size: pxToRem(28);
        line-height: pxToRem(40);
        @include multi-ellipsis();
      }
    }
    .info-list {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      .info {
        width: pxToRem(340);
        padding-left: 0;
        &.block {
          width: pxToRem(690);
        }
      }
    }
    .info {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      padding-left: pxToRem(30);
      font-size: pxToRem(28);
      line-height: pxToRem(40);
      padding-bottom: pxToRem(20);
      background-color: #fff;
      .title {
        margin-right: pxToRem(10);
        color: #707070;
        &.block {
          margin-bottom: pxToRem(10);
          width: 100%;
        }
      }
      .value {
        color: #000;
        margin-right: pxToRem(30);
      }
    }
    .order-footer {
      display: flex;
      align-items: center;
      padding-top: pxToRem(30);
      padding-bottom: pxToRem(30);
      .btn {
        flex: 1;
        height: pxToRem(88);
        line-height: pxToRem(88);
        text-align: center;
        font-size: pxToRem(36);
        border: pxToRem(1) solid #9B9B9B;
        color: #9B9B9B;
        border-radius: pxToRem(8);
      }
      .btn-danger {
        margin-right: pxToRem(50);
        color: #FF6752;
        border-color: #FF6752;
      }
      .btn-active {
        background:linear-gradient(180deg,rgba(117,228,252,1) 0%,rgba(68,189,245,1) 100%);
        color: #fff;
        border: none;
      }
    }
  }
  .result-wrap {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0,0,0,.3);
    .result-body {
      @include middle-center();
      width: pxToRem(670);
      background-color: #fff;
      padding-top: pxToRem(30);
      padding-left: pxToRem(30);
      padding-right: pxToRem(30);
      .result-title {
        padding: pxToRem(30);
        font-size: pxToRem(40);
        color: #4A4A4A;
        text-align: center;
      }
      textarea {
        display: block;
        width: 100%;
        padding: pxToRem(20);
        height: pxToRem(140);
        line-height: 1.4;
        font-size: pxToRem(28);
        border: pxToRem(1) solid #44BDF5;
        border-radius: pxToRem(10);
        box-sizing: border-box;
      }
      .radio-group, input {
        padding-left: pxToRem(200);
      }
      .btn-list {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: pxToRem(30);
        padding: pxToRem(30) pxToRem(10);
        background-color: #fff;
        .btn {
          width: pxToRem(260);
          height: pxToRem(88);
          line-height: pxToRem(88);
          text-align: center;
          font-size: pxToRem(36);
          border: pxToRem(1) solid #9B9B9B;
          color: #9B9B9B;
          border-radius: pxToRem(8);
        }
        .btn-danger {
          color: #FF6752;
          border-color: #FF6752;
        }
        .btn-active {
          background:linear-gradient(180deg,rgba(117,228,252,1) 0%,rgba(68,189,245,1) 100%);
          color: #fff;
          border: none;
        }
      }
    }
  }
</style>
